// ====================CardDisplay====================

class CardDisplay extends CardContainerBase {
    initialize() {
        this._data = null;
        this._cardSprites = [];
        this._selectMode = false;
        this._selectCallback = null;
        this._page = 0;
        this.create();
        this.hide();
    }

    create() {
        this.createBackground();
        this.createTextSprite();
        this.createDisplaySprite();
        this.createButtonSprite();
    }

    createTextSprite() {
        const {width} = this._opts;
        const bitmap = new Bitmap(width, 40);
        const sprite = new Sprite(bitmap);
        bitmap.fontSize = 34;
        this._textSprite = sprite;
        this.addChild(sprite);
    }

    createBackground() {
        const {width, height} = this._opts;
        const bitmap = new Bitmap(width, height);
        const sprite = new Sprite(bitmap);
        bitmap.fillRoundRect(0, 0, width, height, "rgba(255,255,255,0.73)", 0);
        this._backgroundSprite = sprite;
        this.addChild(sprite);
    }

    createDisplaySprite() {
        const {width, height, row, col} = this._opts;
        const itemWidth = (width - 100) / col;
        const itemHeight = (height - 100) / row;
        for (let i = 0; i < row; i++) {
            for (let j = 0; j < col; j++) {
                const sprite = new Sprite_Card({
                    width: 200,
                    height: 300,
                    r: 10,
                    rim: 3
                });
                const ix = itemWidth / 2 + itemWidth * j + 50;
                const iy = itemHeight / 2 + itemHeight * i + 225;
                sprite.move(ix, iy);
                sprite.hide();
                this._cardSprites.push(sprite);
                this.addChild(sprite);
            }
        }
    }

    createButtonSprite() {
        this.createCancelButton();
        this.createNextButton();
        this.createLastButton();
    }

    createCancelButton() {
        const button = new Sprite_Button("cancel");
        button.move(Graphics.width - 106, 10);
        button.setClickHandler(this.onCancel.bind(this));
        this._cancelButton = button;
        this.addChild(button);
    }

    createNextButton() {
        const button = new Sprite_Button("pagedown");
        const x = Graphics.width - 48 - 16;
        const y = (Graphics.height - 48) / 2;
        button.move(x, y);
        button.setClickHandler(this.onNext.bind(this));
        this._nextButton = button;
        this.addChild(button);
    }

    createLastButton() {
        const button = new Sprite_Button("pageup");
        const x = 16;
        const y = (Graphics.height - 48) / 2;
        button.move(x, y);
        button.setClickHandler(this.onLast.bind(this));
        this._lastButton = button;
        this.addChild(button);
    }

    onCancel() {
        if (this._selectMode) {
            if (!!this._selectCallback) {
                this._selectCallback(null);
            }
            CardGameManager.settlement()
        }
        this.hide();
    }

    onNext() {
        this._page++;
        this.refreshCard();
        this.refreshButton();
    }

    onLast() {
        this._page--;
        this.refreshCard();
        this.refreshButton();
    }

    maxPage() {
        const {row, col} = this._opts;
        const amount = this._data?.list?.length || 0;
        return Math.ceil(amount / (row * col));
    }

    open(data) {
        this._data = data;
        this._page = 0;
        this.refresh();
        this.show();
    }

    startSelect(data, callback) {
        this._selectMode = true;
        this._selectCallback = callback;
        this.open(data);
    }

    refresh() {
        this.refreshText();
        this.refreshCard();
        this.refreshButton();
    }

    refreshText() {
        const {text} = this._data;
        const bitmap = this._textSprite.bitmap;
        bitmap.clear();
        if (!text) return;
        bitmap.drawText(text, 0, 0, bitmap.width, 40, "center");
    }

    refreshCard() {
        const {list} = this._data;
        const {row, col} = this._opts;
        const amount = row * col;
        const startIndex = this._page * amount;
        const endIndex = startIndex + amount;
        const data = list.slice(startIndex, endIndex);
        for (let i = 0; i < amount; i++) {
            const card = data[i];
            const sprite = this._cardSprites[i];
            if (!card) {
                sprite.hide();
                continue;
            }
            sprite.setObject(card);
            sprite.show();
        }
    }

    refreshButton() {
        const maxPage = this.maxPage();
        if (this._page <= 0) {
            this._lastButton.hide();
        } else {
            this._lastButton.show();
        }
        if (this._page >= maxPage - 1) {
            this._nextButton.hide();
        } else {
            this._nextButton.show();
        }
    }

    updateContainer() {
        this.updateSelect();
    }

    updateSelect() {
        if (!this._selectMode) return;
        if (TouchInput.isClicked()) {
            for (const sprite of this._cardSprites) {
                if (!sprite.visible) continue;
                if (sprite.hitTest()) {
                    const callback = this._selectCallback;
                    const card = sprite.object();
                    callback(card);
                    this.hide();
                    setTimeout(() => {
                        CardGameManager.settlement()
                    }, 0)
                    // CardGameManager.settlement();
                }
            }
        }
    }
}